<template>
  <el-dialog title="" :visible.sync="onekeydialog1" width="80%" class="task-content" append-to-body @close="closedia">
    <div class="refine_gettask">
      <h2 class="titleblue">领取任务列表<span>(共计{{total}}条)</span></h2>
      <div class="contant">
        <div class="plan-operate">
          <div class="fl whitecreate" @click="refresh">刷新</div>
          <div class="fl create" @click="getTask">领取</div>
        </div>
        <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" border stripe
                  @selection-change="handleSelectionChange">
          <el-table-column prop="d_id" label="序号" width="60" align="center">
            <template slot-scope="scope">
              <span v-if='scope.$index!=9'>{{(currentPage-1).toString()+parseInt(scope.$index+1)}}</span>
              <span v-else>{{currentPage+'0'}}</span>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="taskNo" label="任务编号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="任务名称" align="center">
          </el-table-column>
          <el-table-column prop="taskTypeFlows" label="任务类型" align="center">
            <template slot-scope="scope">
              <span v-for="item in scope.row.taskTypeFlows">{{ttypes(item) ? ttypes(item) : ''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="organiza" label="所属辖区" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.organiza ? scope.row.organiza.name : ''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taskSource" label="任务来源" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.taskSource == 1">派发任务</span>
              <span v-else-if="scope.row.taskSource == 2">临时任务</span>
              <span v-else-if="scope.row.taskSource == 3">领取任务</span>
            </template>
          </el-table-column>
          <el-table-column prop="operate" label="操作" align="center" width="140">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="show(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     layout="total,prev, pager, next, jumper" :total="total" background>
      </el-pagination>

      <el-dialog title="" :visible.sync="successDialog" width="30%" center
                 append-to-body class="successDialog">
        <p style="text-align: center;">您已成功领取{{length}}条新任务，请到每日任务查看</p>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="closebtn" class="successbtn">关闭 {{timer}}s</el-button>
  </span>
      </el-dialog>

      <el-dialog title="" :visible.sync="onekeydialog" width="80%" append-to-body @close="close1">
        <span><router-view @close="close"></router-view></span>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
  import taskService from '@/services/TaskService.js'

  export default {
    data: function () {
      return {
        tableData3: [],
        multipleSelection: [],
        currentPage: 1,
        successDialog: false,
        total: 0,
        timer: 3,
        timeinterval: '',
        timeout: '',
        length: '',
        params: {
          skey: localStorage.getItem('auth'),
          counts: '10',
          page: '1'
        },
        onekeydialog: false,
        onekeydialog1: false,
        taskType: []
      }
    },
    created() {
      this.onekeydialog1 = true
      if (this.$route.params) {
        this.taskType = this.$route.params.data
      }
      this.getData(0)
    },
    methods: {
      ttypes(item) {
        let task = ''
        let obj1 = {}, obj2 = {}, obj3 = {}
        if (item.type1) {
          for (let task of this.taskType) {
            if (task.id == item.type1) obj1 = task
          }
          task = obj1 ? obj1.name : ''
          if (obj1 && obj1.subset) {
            for (let task of obj1.subset) {
              if (task.id == item.type2) obj2 = task
            }
            if (item.type2) task = obj2 ? obj2.name : ''
            if (obj2 && obj2.subset && item.type2) {
              for (let task of obj2.subset) {
                if (task.id == item.type3) obj3 = task
              }
              if (obj3 && item.type3) {
                task = obj3.name
              }
            }
          }
        }
        return task
      },
      getData(num) {
        var str = ''
        var orgId = ''
        if (this.$profile.level == 0) {
            str = '2'
            orgId = this.$profile.organiza.id
        } else if (this.$profile.level == 1) {
            str = '1'
            orgId = this.$profile.organiza.parentId ? this.$profile.organiza.parentId : this.$profile.organiza.id
        } else if (this.$profile.level == 2) {
            str = '0'
        } else {
            str = '-1'
        }
        let query = 'taskState=in=' + str + `${orgId ? ';organiza.id==' + orgId : ''}`
        taskService.ps(num, query).then(res => {
          this.tableData3 = res.data
          this.total = res.dataCount
        })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      getTask() {
        var arr = this.multipleSelection
        if (this.multipleSelection.length == 0) {
          this.$alert('请选择要领取的任务')
          return false
        } else {
          arr = arr.map(item => {
            return {id: item.id}
          })
          this.$confirm('确定领取所选择任务?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            arr.forEach(ele => {
              taskService.update({id: ele.id}, 3).then(res => {
                if (res) {
                  this.closebtn()
                  this.$message({
                    type: 'success',
                    message: '领取成功'
                  })
                }
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
        }
      },
      closebtn() {
        this.$emit("update")
        this.getData(0)
        this.currentPage = 1
        // clearInterval(this.timeinterval)
        // clearTimeout(this.timeout)

        this.multipleSelection = []
        this.successDialog = false
        // this.timer = 3
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        this.getData(val - 1)
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.getData(val - 1)
      },
      refresh() {
        this.tableData3 = []
        this.total = 0
        this.getData(0)
      },

      show(val) {
        this.onekeydialog = true
        this.$router.push({name: 'CreateEverydayTask', params: {data: val, type: 'view'}})
        // this.$router.push({
        //   path: '/everyday-task/create',
        //   query: {
        //     id: val,
        //     type: 'view'
        //   }
        // })
      },
      close() {
        this.onekeydialog = false
      },
      close1() {
        this.onekeydialog = false
        this.$router.go(-1)
      },
      closedia () {
        this.onekeydialog1 = false
        this.$router.go(-1)
      },
    }
  }
</script>

<style lang="scss">

  .refine_gettask {
    width: 100%;
    display: inline-block;

    .titleblue span {
      font-size: 12px;
      color: #999999;
    }

    .plan-operate {
      width: 100%;
      display: inline-block;
    }

    .create {
      width: 130px;
      height: 40px;
      background-color: #0062cd;
      border-radius: 4px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      float: right;
      margin-left: 10px;
    }

    .whitecreate {
      width: 110px;
      height: 40px;
      border-radius: 4px;
      border: solid 1px #0062cd;
      font-size: 14px;
      color: #0062cd;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      float: right;
      margin-left: 10px;
    }

    .has-gutter {
      background-color: #929da9;
      color: #fff;
    }

    .has-gutter th, .has-gutter tr {
      background-color: #929da9;
    }

    .el-progress {
      width: 80%;
      float: left;
    }

    .number {
      float: left;
      font-size: 12px;
    }

    .el-pagination {
      text-align: center;
      margin: 50px auto;
    }

  }
</style>
